import React from 'react';
import {Spin, Card, Button, Row, Col, Table} from 'antd';
import PropTypes from 'prop-types';
import {getDetail} from './api';
import {injectIntl} from './intl';
import {conventEnumValueToString, formatDateTime} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from './routes';
import {TABLE, DATE_FORMAT} from '../constants';
import {hasPermissions} from './utils';
import {PERMISSIONS} from './constants';
import {agentKind, dealerType, baseDataStatus, dealerExtendAuthorisedMethod, dealerExtendOnlineStatus} from '../Enum';
const {Description} = DescriptionList;
import styles from './style.css';

class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {},
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }
    onCancel = () => {
        this.props.history.push(routes.query.url());
    }
    render() {
        const {formatMessage} = this.props.intl;
        const data = this.state.data || {};
        const {options} = data;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSIONS.update) && hasPermissions(options, PERMISSIONS.update))
            operations.push(<Button key="update" onClick={this.handleUpdateClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.edit',
                    defaultMessage: '编辑'
                })
            }</Button>);
        const colums = [{
            title: formatMessage({
                id: 'newPanel.column.userName',
                defaultMessage: '用户名'
            }),
            dataIndex: 'userName',
        }, {
            title: formatMessage({
                id: 'newPanel.column.name',
                defaultMessage: '姓名'
            }),
            dataIndex: 'name',
        }];
        return (
            <div>
                <Spin spinning={this.state.loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={12}>{
                            formatMessage({
                                id: 'detail.operation.dealer',
                                defaultMessage: '总代基础信息'
                            })
                        }</Col>
                        <Col className={`col-align-right ${styles.detail}`} span={12}>{operations}</Col>
                        </Row>}>
                            <Description term={formatMessage({
                                id: 'detail.operation.code',
                                defaultMessage: '编号'
                            })}>{data.code}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.name',
                                defaultMessage: '名称'
                            })}>{data.name}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.shortCode',
                                defaultMessage: '简码'
                            })}>{data.shortCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.shortName',
                                defaultMessage: '简称'
                            })}>{data.shortName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.kind',
                                defaultMessage: '客户分类'
                            })}>{conventEnumValueToString(agentKind, data.kind)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.type',
                                defaultMessage: '客户类型'
                            })}>{conventEnumValueToString(dealerType, data.type)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.area',
                                defaultMessage: '国际区域'
                            })}>{data.area}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.status',
                                defaultMessage: '状态'
                            })}>{conventEnumValueToString(baseDataStatus, data.status)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.country',
                                defaultMessage: '国家'
                            })}>{data.country}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.province',
                                defaultMessage: '省份'
                            })}>{data.province}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.city',
                                defaultMessage: '城市'
                            })}>{data.city}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.contactNumber',
                                defaultMessage: '联系电话'
                            })}>{data.contactNumber}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.fax',
                                defaultMessage: '传真'
                            })}>{data.fax}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.address',
                                defaultMessage: '联系地址'
                            })}>{data.address}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.zipCode',
                                defaultMessage: '邮政编码'
                            })}>{data.zipCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.abandonerName',
                                defaultMessage: '作废人姓名'
                            })}>{data.abandonerName}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.abandonTime',
                                defaultMessage: '作废时间'
                            })}>{formatDateTime(data.abandonTime, DATE_FORMAT)}
                            </Description>
                        </DescriptionList>
                    </Card>
                    {
                        data.dealerExtend && <Card>
                            <DescriptionList size="large" title={formatMessage({
                                id: 'detail.operation.dealerExtend',
                                defaultMessage: '总代扩展信息'
                            })}>
                                <Description term={formatMessage({
                                    id: 'detail.operation.dealerId',
                                    defaultMessage: '总代'
                                })}>{`(${data.code})${data.name}`}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.juridicalPerson',
                                    defaultMessage: '法人'
                                })}>{data.dealerExtend.juridicalPerson}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.juridicalPersonPhone',
                                    defaultMessage: '法人电话'
                                })}>{data.dealerExtend.juridicalPersonPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.juridicalPersonEmail',
                                    defaultMessage: '法人邮箱'
                                })}>{data.dealerExtend.juridicalPersonEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.generalManager',
                                    defaultMessage: '总经理'
                                })}>{data.dealerExtend.generalManager}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.generalManagerPhone',
                                    defaultMessage: '总经理电话'
                                })}>{data.dealerExtend.generalManagerPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.generalManagerEmail',
                                    defaultMessage: '总经理邮箱'
                                })}>{data.dealerExtend.generalManagerEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesDirector',
                                    defaultMessage: '销售总监'
                                })}>{data.dealerExtend.salesDirector}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesDirectorPhone',
                                    defaultMessage: '销售总监电话'
                                })}>{data.dealerExtend.salesDirectorPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesDirectorEmail',
                                    defaultMessage: '销售总监邮箱'
                                })}>{data.dealerExtend.salesDirectorEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceDirector',
                                    defaultMessage: '服务总监'
                                })}>{data.dealerExtend.serviceDirector}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceDirectorPhone',
                                    defaultMessage: '服务总监电话'
                                })}>{data.dealerExtend.serviceDirectorPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceDirectorEmail',
                                    defaultMessage: '服务总监邮箱'
                                })}>{data.dealerExtend.serviceDirectorEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.marketDirector',
                                    defaultMessage: '市场总监'
                                })}>{data.dealerExtend.marketDirector}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.marketDirectorPhone',
                                    defaultMessage: '市场总监电话'
                                })}>{data.dealerExtend.marketDirectorPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.marketDirectorEmail',
                                    defaultMessage: '市场总监邮箱'
                                })}>{data.dealerExtend.marketDirectorEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.financialController',
                                    defaultMessage: '财务总监'
                                })}>{data.dealerExtend.financialController}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.financialControllerPhone',
                                    defaultMessage: '财务总监电话'
                                })}>{data.dealerExtend.financialControllerPhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.financialControllerEmail',
                                    defaultMessage: '财务总监邮箱'
                                })}>{data.dealerExtend.financialControllerEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesInterfacePerson',
                                    defaultMessage: '与奇瑞国际销售接口录入人'
                                })}>{data.dealerExtend.salesInterfacePerson}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesInterfacePhone',
                                    defaultMessage: '与奇瑞国际销售接口录入人电话'
                                })}>{data.dealerExtend.salesInterfacePhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.salesInterfaceEmail',
                                    defaultMessage: '与奇瑞国际销售接口录入人邮箱'
                                })}>{data.dealerExtend.salesInterfaceEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceInterfacePerson',
                                    defaultMessage: '与奇瑞国际服务接口录入人'
                                })}>{data.dealerExtend.serviceInterfacePerson}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceInterfacePhone',
                                    defaultMessage: '与奇瑞国际服务接口录入人电话'
                                })}>{data.dealerExtend.serviceInterfacePhone}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.serviceInterfaceEmail',
                                    defaultMessage: '与奇瑞国际服务接口录入人邮箱'
                                })}>{data.dealerExtend.serviceInterfaceEmail}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.incorporatedDate',
                                    defaultMessage: '公司成立日期'
                                })}>{formatDateTime(data.dealerExtend.incorporatedDate, DATE_FORMAT)}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.startTime',
                                    defaultMessage: '授权经营奇瑞起始时时间'
                                })}>{formatDateTime(data.startTime, DATE_FORMAT)}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.authorisedMethod',
                                    defaultMessage: '授权方式'
                                })}>{conventEnumValueToString(dealerExtendAuthorisedMethod, data.dealerExtend.authorisedMethod)}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.authorisedArea',
                                    defaultMessage: '授权区域'
                                })}>{data.dealerExtend.authorisedArea}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.arrivedAddress',
                                    defaultMessage: '收货港'
                                })}>{data.dealerExtend.arrivedAddress}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.openDate',
                                    defaultMessage: '开业日期'
                                })}>{formatDateTime(data.dealerExtend.openDate, DATE_FORMAT)}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.onlineStatus',
                                    defaultMessage: '上线状态'
                                })}>{conventEnumValueToString(dealerExtendOnlineStatus, data.dealerExtend.onlineStatus)}
                                </Description>
                                <Description term={formatMessage({
                                    id: 'detail.operation.updatedDate',
                                    defaultMessage: '更新日期'
                                })}>{formatDateTime(data.dealerExtend.updatedDate, DATE_FORMAT)}
                                </Description>
                            </DescriptionList>
                        </Card>

                    }
                    <Card>
                        <DescriptionList size="large" title={formatMessage({
                            id: 'detail.operation.personnels',
                            defaultMessage: '人员清单'
                        })}>
                            <Table
                                className="white-space-nowrap"
                                rowKey="id"
                                columns={colums}
                                pagination={false}
                                dataSource={data.personnels}
                                {...TABLE} />
                        </DescriptionList>
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" onClick={this.onCancel}>{formatMessage({
                        id: 'detail.operation.onCancel',
                        defaultMessage: '返回'
                    })}</Button>
                </div>
            </div >
        );
    }
}

DetailPanel.propTypes = {
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
};


import {connect} from 'react-redux';
import {
    tableSearch
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = state => ({
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
